<template>
  <div>
    <el-table
      :data="state.tableData"
      class="customer-table"
      max-height="250"
      v-loading="state.loading"
      :element-loading-background="
        themeType === 'night'
          ? 'rgba(0, 0, 0, 0.6)'
          : 'rgba(255, 255, 255, 0.6)'
      "
      header-cell-class-name="eltablebg"
      style="width: 100%"
    >
      <el-table-column
        prop
        :label="$t('exchange.lever')"
        label-class-name="left-radius-8"
      >
        <template #default="r">
          <span>
            {{
              r.row.currency_name +
                "/" +
                r.row.legal_name +
                " x" +
                r.row.lever_multiple
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="lever_open_price"
        :label="$t('exchange.openingPrice')"
      >
        <template #default="r">{{
          $currency(r.row.lever_open_price)
        }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="lever_now_price"
        :label="$t('exchange.closingPrice')"
      >
        <template #default="r">{{ $currency(r.row.lever_now_price) }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="lever_earnest_money"
        :label="$t('exchange.margin')"
      >
        <template #default="r">{{
          $currency(r.row.lever_earnest_money)
        }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="lever_hand"
        :label="$t('exchange.lot')"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="address"
        :label="$t('deal.stoploss')"
      >
        <template #default="r">
          <span>{{
            (r.row.stop_win_price ? $currency(r.row.stop_win_price) : "--") +
              "/" +
              (r.row.stop_lose_price ? $currency(r.row.stop_lose_price) : "--")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        :label="$t('exchange.type')"
      >
        <template #default="r">
          <span :class="r.row.lever_type === 1 ? 'text-green' : 'text-red'">
            {{
              r.row.lever_type === 1
                ? $t("exchange.doMore")
                : $t("exchange.short")
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="lever_open_time"
        :label="$t('lever.opentime')"
      >
        <template #default="r">
          <span>{{ getTimeZoneDate(r.row.lever_open_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="trade_fee" :label="$t('exchange.handlingFee')">
        <template #default="r">{{ $currency(r.row.trade_fee) }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="lever_overnight_fee"
        :label="$t('exchange.overnightFee')"
        ><template #default="r">
          <span>{{
            r.row.lever_status === 4
              ? "--"
              : $currency(r.row.lever_overnight_fee)
          }}</span>
        </template></el-table-column
      >
      <el-table-column prop="profit" :label="$t('exchange.profitAndLoss')"
        ><template #default="r">
          <span>{{
            r.row.lever_status === 4 ? "--" : $currency(r.row.profit)
          }}</span>
        </template></el-table-column
      >
      <el-table-column
        align="right"
        prop="lever_status"
        :label="$t('assets.status')"
        label-class-name="right-radius-8"
      >
        <template #default="r">
          <span>
            {{
              r.row.lever_status === 0
                ? $t("exchange.waitingPending")
                : r.row.lever_status === 1
                ? $t("exchange.pengding")
                : r.row.lever_status === 2
                ? $t("exchange.trading")
                : r.row.lever_status === 3
                ? $t("exchange.closed")
                : $t("exchange.cancelled")
            }}
          </span>
        </template>
      </el-table-column>
      <template #empty>
        <div>
          <Norecord :useDark="true" />
          <!-- <div class="quotet3 text-12 mb-60 l-10">暂无数据</div> -->
        </div>
      </template>
    </el-table>

    <!-- 监听table滚动条触底 -->
    <Tablescroll @scroll="tableScroll" />
  </div>
</template>

<script>
import Norecord from "@/components/noRecord/NoRecord.vue";
import { reactive, onMounted, watch, computed } from "vue";
import { leverPage } from "@/api/currency";
import { demoleverPage } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import { useStore } from "vuex";
import Tablescroll from "@/components/tablescroll/index.vue";
import { LoginInterception } from "@/utils/common";
import { getTimeZoneDate } from "@/utils/times.js";

export default {
  name: "Lever-Curent",
  components: { Norecord, Tablescroll },
  props: { checked: Boolean, tradingid: Number },
  setup(props) {
    const state = reactive({
      listParam: {
        page: 0,
        limit: 10,
        lever_status: 3,
      },
      loading: false,
      tableData: [],
      total: 0,
    });
    /**
     * methods
     */
    const $store = useStore();
    onMounted(() => {
      getList();
    });
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    const themeType = computed(() => {
      return $store.state.exchange.theme;
    });
    // eslint-disable-next-line no-unused-vars
    watch(props, (val) => {
      state.listParam.page = 0;
      getList();
    });
    watch(
      () => virtual_wallet.value,
      () => {
        state.listParam.page = 0;
        getList();
      }
    );
    const getList = () => {
      const param = { ...state.listParam };
      // 判断是否只显示当前币
      if (props.checked) {
        param.currency_match_id = props.tradingid;
      }
      state.loading = true;
      LoginInterception("/lever")
        .then(() => {
          let setFun = virtual_wallet.value ? demoleverPage : leverPage;
          setFun(param)
            .then((res) => {
              state.loading = false;
              if (state.listParam.page === 0) {
                state.tableData = res.data.items;
              } else {
                state.tableData = state.tableData.concat(res.data.items);
              }
              state.total = res.data.total;
            })
            .catch(() => {
              state.loading = false;
            });
        })
        .catch(() => {
          state.loading = false;
        });
    };
    // table滚动条触底
    const tableScroll = () => {
      if (state.total > state.tableData.length) {
        state.listParam.page = state.listParam.page + 1;
        getList();
      }
    };
    return {
      state,
      getList,
      tableScroll,
      getTimeZoneDate,
      themeType,
    };
  },
};
</script>

<style scoped lang="less"></style>
